<template>
	<view class="actions">
		<view class="avatar">
			<image class="img" :src="avatar" mode="cover" />
			<view class="plus">+</view>
		</view>
		<view class="btn" :class="{ active: liked }" @tap="onTapLike">
			<uni-icons :type="liked ? 'heart-filled' : 'heart'" :color="liked ? '#ff4155' : '#fff'" size="28" />
			<text class="num">{{ likeCount }}</text>
		</view>
		<view class="btn" @tap="$emit('comment')">
			<uni-icons type="chat" color="#fff" size="28" />
			<text class="num">{{ comment }}</text>
		</view>
		<view class="btn" :class="{ active: starred }" @tap="onTapStar">
			<uni-icons :type="starred ? 'star-filled' : 'star'" :color="starred ? '#ffd54f' : '#fff'" size="28" />
			<text class="num">{{ starCount }}</text>
		</view>
		<view class="btn" @tap="$emit('share')">
			<uni-icons type="redo" color="#fff" size="28" />
			<text class="num">{{ share }}</text>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps({
	avatar: { type: String, default: '/static/logo.png' },
	like: { type: [Number,String], default: 5821 },
	comment: { type: [Number,String], default: 128 },
	star: { type: [Number,String], default: 4301 },
	share: { type: [Number,String], default: 1292 },
	liked: { type: Boolean, default: false },
	starred: { type: Boolean, default: false }
})
const emit = defineEmits(['like','unlike','star','unstar'])
const likeCount = ref(Number(props.like) || 0)
const starCount = ref(Number(props.star) || 0)
const liked = ref(props.liked)
const starred = ref(props.starred)

function onTapLike(){
	liked.value = !liked.value
	likeCount.value += liked.value ? 1 : -1
	// 这里对接点赞接口（乐观更新）：
	// 如果需要等待接口成功再更新，把上面两行移动到接口回调里
	// emit 交给父组件处理真实接口请求
	emit(liked.value ? 'like' : 'unlike')
}

function onTapStar(){
	starred.value = !starred.value
	starCount.value += starred.value ? 1 : -1
	// 这里对接收藏接口（乐观更新）：
	// 若要严格与后端一致，可在失败时还原状态
	emit(starred.value ? 'star' : 'unstar')
}
</script>

<style lang="scss" scoped>
.actions{
	position: absolute;
	right: 20rpx;
	bottom: 220rpx;
	display:flex;
	flex-direction: column;
	align-items: center;
	gap: 30rpx;
	z-index: 4;
}
.avatar{ position: relative; width: 100rpx; height: 100rpx; }
.img{ width: 100%; height: 100%; border-radius: 50%; border: 4rpx solid rgba(255,255,255,.9); }
.plus{ position:absolute; left: 50%; transform: translateX(-50%); bottom: -8rpx; width: 46rpx; height: 46rpx; border-radius: 50%; background:#ff3b30; color:#fff; text-align:center; line-height:46rpx; font-size: 28rpx; font-weight: 700; border: 4rpx solid #fff; }
.btn{ display:flex; flex-direction: column; align-items:center; color:#fff; }
.btn.active{ animation: pop .2s ease; }
.num{ margin-top: 8rpx; font-size: 24rpx; opacity:.95; }
@keyframes pop{ from{ transform: scale(0.9);} to{ transform: scale(1);} }
</style>


